import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, message, Form, Input, Modal, Checkbox, Button } from 'antd';
import { FormInstance } from 'antd/lib/form';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const mapStateToProps = (state: any) => ({
  knowledgeSpecialtyManage: state.knowledgeSpecialtyManage,
  // loading: state.loading.effects['http/postObjWithRes'],
});

class SpecialtyManageModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  constructor(props: any) {
    super(props);
    this.state = {
      id: ''
    }
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  setData = (record: any) => {
    this.formRef.current?.setFieldsValue({
      ...record
    });
    this.setState({
      id: record.id
    })
  }

  //  取消操作
  cancel = () => {
    const { closeModal } = this.props;
    closeModal();
    this.resetData();
  }

  resetData = () => {
    this.setState({
      id: ''
    })
    this.formRef.current?.resetFields();
  }

  //  保存操作
  save = () => {
    this.formRef.current?.submit();
  }

  //  提交数据
  ok = (values: any) => {
    const { handleRefresh, closeModal, dispatch } = this.props;
    const { id } = this.state;
    const type = id ? 'putObjWithRes' : 'postObjWithRes';
    const url = id ? '/mscontent/knowledge/major/edit' : '/mscontent/knowledge/major/save';
    const data = id ? { id, ...values } : { ...values };
    dispatch({
      type: `http/${type}`,
      payload: {
        url: url,
        ...data
      },
      callback: (res: any) => {
        if (res.statusCode == '0') {
          message.success('操作成功');
          closeModal();
          handleRefresh();
          this.resetData();
        }
      }
    })
  }

  render() {
    const { modalVisible } = this.props;
    const footer = (
      <div>
        <Button size="small" onClick={this.cancel}>
          取消
        </Button>
        {/* loading={loading} */}
        <Button size="small" onClick={this.save} type="primary">
          保存
        </Button>
      </div>
    );

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };

    return (
      <>
      <Modal
        style={{ top: 20 }}
        footer={footer}
        title="专业信息"
        visible={modalVisible}
        onCancel={this.cancel}
      >
        <Form
          style={{ marginTop: 12 }}
          ref={this.formRef}
          onFinish={this.ok}
        >
          <FormItem
            {...formItemLayout}
            label="专业编码"
            name="majorCode"
            rules={[{ required: true, message: '请输入专业编码' }]}
          >
            {/* maxLength={11} */}
            <Input placeholder="专业编码" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="专业名称"
            name="name"
            rules={[{ required: true, message: '请输入专业名称' }]}
          >
            <Input placeholder="专业名称" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="专业描述"
            name="description"
            rules={[]}
          >
            <TextArea rows={4} placeholder="专业描述" />
          </FormItem>
        </Form>
      </Modal>
      </>
    )
  }
}
export default connect(mapStateToProps)(SpecialtyManageModal);
